import { Col, Flex, Row, Divider, Badge, Radio, DatePicker, Button } from 'antd';
const { RangePicker } = DatePicker;
import "../../assets/css/console.scss"
import { CopyOutlined, MediumOutlined } from "@ant-design/icons"
import { useEffect, useState } from "react"
import axios from '../../axios';
import AutoChart from '../../components/AutoChart';
import * as  echarts from 'echarts';
const Console = () => {
    const [dataobj, setDataobj] = useState({})
    const [size, setSize] = useState('yesterday');
    const onChange = (e) => {
        setSize(e.target.value);
        getData(e.target.value);
    };
    const getData = async (arg) => {
        let res = await axios.get("/statistics/user/overview", {
            params: {
                dateLimit: arg,
                temp: new Date().getTime()
            }
        })
        setDataobj(res);
    }
    const onChangeTime = (e) => {
        const startTime = `${e[0].$y}-${(e[0].$M + 1) < 10 ? "0" + (e[0].$M + 1) : (e[0].$M + 1)}-${(e[0].$D) < 10 ? "0" + (e[0].$D) : (e[0].$D)}`;
        const endTime = `${e[1].$y}-${(e[1].$M + 1) < 10 ? "0" + (e[1].$M + 1) : (e[1].$M + 1)}-${(e[1].$D) < 10 ? "0" + (e[1].$D) : (e[1].$D)}`;
        // console.log(startTime);
        // console.log(endTime);
        // getData(`${startTime},${endTime}`)
        setTimeRange(`${startTime},${endTime}`)
    }
    const [timerange, setTimeRange] = useState("")
    const searchData = () => {

        if (timerange) {

            getData(timerange)
        }
    }


    const [option, setOption] = useState({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'right'
        },
        series: [
            {

                type: 'pie',
                radius: ['40%', '80%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    // { value: 1048, name: 'H5' },
                    // { value: 735, name: 'APP' },
                    // { value: 580, name: '小程序' }
                ]
            }
        ]
    })

    const getOption = async () => {
        let res = await axios.get("/statistics/user/channel", { params: { temp: new Date().getTime() } });
        const data = []
        res.map(item => {
            let pt = "";
            switch (item.channel) {
                case "androidWx":
                    pt = "安卓"
                    break;
                case "routine":
                    pt = "小程序"
                    break;

                default:
                    pt = item.channel
                    break;
            }
            data.push({
                name: pt,
                value: item.num,
            })
        })

        setOption(pre => {//pre 是option的原始数据
            pre.series[0].data = data
            return { ...pre }
        })
    }


    const [option2, setOption2] = useState({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },

        legend: {
            data: []
        },
        xAxis: [
            {
                type: 'category',
                data: [],// 存放日期
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    rotate: 45 // X轴标签倾斜 45 度
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '订单金额',
                // min: 0,
                // max: 250,
                // interval: 50,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '订单数量',
                // min: 0,
                // max: 25,
                // interval: 5,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '订单金额',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return '￥' + value;
                    }
                },
                data: []
            },
            {
                name: '订单数量',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + '个';
                    }
                },
                data: []
            }
        ]
    })
    const getOption2 = async () => {
        let res = await axios.get("/statistics/home/chart/order", { params: { temp: new Date().getTime() } })
        // console.log(res);
        let date = [];//x轴数据有了
        let ordermoney = [] //左侧金额
        let ordernum = []// 右侧的数量
        for (const key in res.price) {
            date.push(key)
            ordermoney.push(res.price[key])
        }

        for (const key in res.quality) {
            ordernum.push(res.quality[key])
        }
        setOption2(pre => {
            pre.legend.data = ['订单金额', '订单数量']
            pre.xAxis[0].data = date;
            //    pre.series[0].data=ordermoney;
            //    pre.series[1].data=ordernum
            pre.series = [
                {
                    name: '订单金额',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return '￥' + value;
                        }
                    },
                    data: ordermoney
                },
                {
                    name: '订单数量',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '个';
                        }
                    },
                    data: ordernum
                }
            ]
            return { ...pre }
        })
    }
    const showFour = async (arg) => {
        let res = await axios.get(`/statistics/home/chart/order/${arg}`, { params: { temp: new Date().getTime() } })
        // console.log(res);
        let week = [];// x轴的数据
        let preweekdata = [];//上周价格
        let weekdata = [];//本周价格
        let preordernum = [];//上周订单数量
        let ordernum = []//本周的订单数量
        for (const key in res.prePrice) {
            week.push(key)
            preweekdata.push(res.prePrice[key])
        }
        for (const key in res.price) {
            weekdata.push(res.price[key])
        }
        for (const key in res.preQuality) {
            preordernum.push(res.preQuality[key])
        }
        for (const key in res.quality) {
            ordernum.push(res.quality[key])
        }
        setOption2(pre => {
            pre.xAxis[0].data = week;
            pre.legend.data = ["上周金额", "本周金额", "上周订单数", "本周订单数"]
            pre.series = [
                {
                    name: '上周金额',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: preweekdata
                },
                {
                    name: '本周金额',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: weekdata
                },
                {
                    name: '上周订单数',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: preordernum
                },
                {
                    name: '本周订单数',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: ordernum
                }
            ]
            return { ...pre }
        })
        // setOption2(pre => {

        //     pre.series = [
        //         {
        //             name: 'Evaporation',
        //             type: 'bar',
        //             tooltip: {
        //                 valueFormatter: function (value) {
        //                     return value + ' ml';
        //                 }
        //             },
        //             data: [
        //                 2.0, 4.9, 7.0, 23.2, 25.6
        //             ]
        //         },
        //         {
        //             name: 'Precipitation',
        //             type: 'bar',
        //             tooltip: {
        //                 valueFormatter: function (value) {
        //                     return value + ' ml';
        //                 }
        //             },
        //             data: [
        //                 2.6, 5.9, 9.0, 26.4, 28.7
        //             ]
        //         },
        //         {
        //             name: 'Temperature',
        //             type: 'line',
        //             yAxisIndex: 1,
        //             tooltip: {
        //                 valueFormatter: function (value) {
        //                     return value + ' °C';
        //                 }
        //             },
        //             data: [2.0, 2.2, 3.3, 4.5, 6.3]
        //         },
        //         {
        //             name: '硕硕',
        //             type: 'line',
        //             yAxisIndex: 1,
        //             tooltip: {
        //                 valueFormatter: function (value) {
        //                     return value + ' °C';
        //                 }
        //             },
        //             data: [10, 20, 4, 13, 8]
        //         }
        //     ]
        //     return { ...pre }
        // })
    }
    const [timeval, setTimeval] = useState('day');

    const orderonChange = (e) => {setTimeval(e.target.value);
        // console.log(e.target.value);
    //     setOption(pre=>{
    //         pre.series=[]
    //        return {...pre}
    //    })
        
        if (e.target.value == "day") {
           
            getOption2()
        } else {
            showFour(e.target.value)
        }
    };


// 下面是第三个图标
    const option3 = {


        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: [""]
          },
          toolbox: {
        
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '人数',
              type: 'line',
            //   stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(128, 255, 165)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(1, 191, 236)'
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [140, 232, 101, 264, 90, 340, 250]
            }
          ]
      };
    useEffect(() => {
        getData(size)
        getOption()
        getOption2()
    }, [])


    return (
        <>
            <Row gutter={16}>
                <Col className='colbottom' xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className='whitebg' vertical={true} justify="space-between">

                        <Flex justify="space-between">
                            <span>销售额</span>
                            <Badge count="今日" />
                        </Flex>
                        <h1>100.00</h1>
                        <Divider></Divider>
                        <Flex justify="space-between">
                            <span>昨日数据</span>
                            <span>61.60元</span>
                        </Flex>
                    </Flex>


                </Col>
                <Col className='colbottom' xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className='whitebg' vertical={true} justify="space-between">

                        <Flex justify="space-between">
                            <span>销售额</span>
                            <Badge count="今日" />
                        </Flex>
                        <h1>100.00</h1>
                        <Divider></Divider>
                        <Flex justify="space-between">
                            <span>昨日数据</span>
                            <span>61.60元</span>
                        </Flex>
                    </Flex>
                </Col>
                <Col className='colbottom' xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className='whitebg' vertical={true} justify="space-between">

                        <Flex justify="space-between">
                            <span>销售额</span>
                            <Badge count="今日" />
                        </Flex>
                        <h1>100.00</h1>
                        <Divider></Divider>
                        <Flex justify="space-between">
                            <span>昨日数据</span>
                            <span>61.60元</span>
                        </Flex>
                    </Flex>
                </Col>
                <Col className='colbottom' xs={24} sm={24} md={12} lg={6} xl={6}>
                    <Flex className='whitebg' vertical={true} justify="space-between">

                        <Flex justify="space-between">
                            <span>销售额</span>
                            <Badge count="今日" />
                        </Flex>
                        <h1>100.00</h1>
                        <Divider></Divider>
                        <Flex justify="space-between">
                            <span>昨日数据</span>
                            <span>61.60元</span>
                        </Flex>
                    </Flex>
                </Col>
            </Row>
            <Row gutter={16}>

                <Col className='colbottom' xs={24} sm={24} md={12} lg={12} xl={12}>

                    <section className='whitebg'>
                        <h3>快捷入口</h3>
                        <Flex wrap>
                            <div className='center flexitem'>
                                <div className="pic"><MediumOutlined /></div>
                                <p>用户管理</p>
                            </div>
                            <div className='center flexitem'>
                                <div className="pic"><CopyOutlined /></div>

                                <p>商品管理</p>
                            </div>
                            <div className='center flexitem'>
                                <div className="pic"><CopyOutlined /></div>

                                <p>订单管理</p>
                            </div>
                            <div className='center flexitem'>
                                <div className="pic"><CopyOutlined /></div>

                                <p>文章管理</p>
                            </div>
                            <div className='center flexitem'>
                                <div className="pic"><CopyOutlined /></div>

                                <p>分销管理</p>
                            </div>
                            <div className='center flexitem'>
                                <div className="pic"><CopyOutlined /></div>

                                <p>优惠劵</p>
                            </div>




                        </Flex>
                    </section>

                </Col>
                <Col className='colbottom' xs={24} sm={24} md={12} lg={12} xl={12}>

                    <section className='whitebg'>
                        <h3>经营数据</h3>
                        <Flex wrap>
                            <div className='center flexitem'>
                                <h1>298</h1>
                                <p>代发货订单</p>
                            </div>
                            <div className='center flexitem'>
                                <h1>100</h1>
                                <p>退款中订单</p>
                            </div>
                            <div className='center flexitem'>
                                <h1>100</h1>
                                <p>待核销订单</p>
                            </div>
                            <div className='center flexitem'>
                                <h1>100</h1>
                                <p>库存预警</p>
                            </div>
                            <div className='center flexitem'>
                                <h1>100</h1>
                                <p>上架商品</p>
                            </div>
                            <div className='center flexitem'>
                                <h1>9</h1>
                                <p>仓库商品</p>
                            </div>
                            <div className='center flexitem'>
                                <h1>9</h1>
                                <p>提现待审核</p>
                            </div>
                            <div className='center flexitem'>
                                <h1>0.00</h1>
                                <p>账户充值</p>
                            </div>




                        </Flex>
                    </section>

                </Col>
            </Row>
            <Row gutter={16}>
                <Col className='colbottom' xs={24} sm={24} md={18} lg={18} xl={18}>
                    <section className='whitebg' style={{ height: "400px" }}>
                        <Flex justify='space-between' align='center'>
                            <h3>用户概览</h3>
                            <div>
                                <Radio.Group
                                    value={size}
                                    onChange={onChange}
                                    style={{
                                        marginBottom: 16,
                                    }}
                                >
                                    <Radio.Button value="yesterday">昨天</Radio.Button>
                                    <Radio.Button value="lately7">近7天</Radio.Button>
                                    <Radio.Button value="lately30">近30天</Radio.Button>
                                </Radio.Group>

                                <RangePicker onChange={(e) => onChangeTime(e)} />
                                {/* {timerange} */}
                                <Button onClick={() => searchData()} type='primary'>搜索</Button>
                            </div>

                        </Flex>

                        {dataobj.registerNumRatio}


                    </section>

                </Col>
                <Col className='colbottom' xs={24} sm={24} md={6} lg={6} xl={6} >
                    <section className='whitebg' style={{ height: "400px" }}>
                        <h3>用户渠道</h3>
                        <AutoChart option={option}></AutoChart>
                    </section>
                </Col>
            </Row>
            <Row gutter={16}>

                <Col className='colbottom' xs={24} sm={24} md={24} lg={24} xl={24} >
                    <section className='whitebg' style={{ height: "400px" }}>
                        <Flex justify='space-between'>
                            <h3>订单统计</h3>
                            <Radio.Group value={timeval} onChange={(e) => orderonChange(e)}>
                                <Radio.Button value="day">30天</Radio.Button>
                                <Radio.Button value="week">周</Radio.Button>
                                <Radio.Button value="month">月</Radio.Button>
                                <Radio.Button value="year">年</Radio.Button>
                            </Radio.Group>
                        </Flex>

                        <AutoChart option={option2}></AutoChart>
                    </section>
                </Col>
            </Row>
            <Row gutter={16}>

                <Col className='colbottom' xs={24} sm={24} md={24} lg={24} xl={24} >
                    <section className='whitebg' style={{ height: "400px" }}>
                        <h3>用户统计</h3>
                        <AutoChart option={option3}></AutoChart>
                    </section>
                </Col>
            </Row>

        </>
    )
};
export default Console;
